<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<h1>测试RESTful编程风格</h1>
<hr>
<!--RESTful风格的：查询用户列表-->
<a th:href="@{/user}">查询用户列表</a><br>

<!--RESTful风格的：根据用户id查询用户信息-->
<a th:href="@{/user/110}">查询id=110的用户信息</a><br>

<!--RESTful风格的：新增用户信息，新增必须发送post请求，需要使用form表单-->
<form th:action="@{/user}" method="post">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    年龄：<input type="text" name="age"><br>
    <input type="submit" value="保存"><br>
</form>

<!--RESTful风格的：修改用户信息，修改必须发送put请求，要发送put请求，首先必须是post请求-->
<form th:action="@{/user}" method="post">
    <!--隐藏域-->
    <input type="hidden" name="_method" value="put">

    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    年龄：<input type="text" name="age"><br>
    <input type="submit" value="修改"><br>
</form>

<!-- RESTful风格的:删除用户信息 -->
<!-- 删除必须发送DELETE请求。和PUT请求实现方式相同。 -->
<!-- 发送DELETE请求的前提是POST请求,并且需要通过隐藏域提交 method=delete -->
<a th:href="@{/user/120}" onclick="del(event)">删除id=120的用户信息</a><br>

<form id="deleteForm" method="post">
    <input type="hidden" name="_method" value="delete">
</form>

<script>
    function del(event){
        // 获取表单
        let deleteForm = document.getElementById("deleteForm");
        // 给form表单的action属性赋值
        deleteForm.action = event.target.href;
        // 发送post请求提交表单
        deleteForm.submit();
        // 非常重要，你需要阻止超链接的默认行为
        event.preventDefault();
    }
</script>

</body>
</html>